<template>
  <AxiomBottomSheet
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="axiom-multi-select-sheet">
      <!-- Header -->
      <div class="header">
        <AxiomButton
          size="small"
          type="primary"
          @click="handleClear"
          class="btn-clear"
        >
          清空
        </AxiomButton>
        
        <AxiomTitle
          :title="title"
          type="component"
          level="3"
          class="sheet-title"
        />
        
        <AxiomButton
          size="small"
          @click="$emit('update:visible', false)"
          class="btn-close"
        >
          <AxiomIcon name="Close" size="16" />
        </AxiomButton>
      </div>
      
      <!-- Options -->
      <div class="options-list">
        <div
          v-for="option in options"
          :key="option.value"
          class="option-item"
          :class="{ selected: internalValue.includes(option.value) }"
          @click="toggleOption(option.value)"
        >
          <AxiomText
            weight="medium"
            :type="internalValue.includes(option.value) ? 'primary' : 'default'"
            class="option-label"
          >
            {{ option.label }}
          </AxiomText>
          
          <div v-if="internalValue.includes(option.value)" class="checkmark">
            ✓
          </div>
        </div>
      </div>
      
      <!-- Footer Button -->
      <div class="footer">
        <AxiomButton
          type="primary"
          size="large"
          @click="handleConfirm"
          class="confirm-button"
        >
          确定
        </AxiomButton>
      </div>
    </div>
  </AxiomBottomSheet>
</template>

<script setup>
import { ref, watch } from 'vue';
import AxiomBottomSheet from './AxiomBottomSheet.vue';
import AxiomButton from '../common/AxiomButton.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomText from '../common/AxiomText.vue';
import AxiomIcon from '../common/AxiomIcon.vue';

const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: '多选'
  },
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm']);

const internalValue = ref([...props.modelValue]);

watch(() => props.modelValue, (newValue) => {
  internalValue.value = [...newValue];
});

const toggleOption = (value) => {
  const index = internalValue.value.indexOf(value);
  if (index > -1) {
    internalValue.value.splice(index, 1);
  } else {
    internalValue.value.push(value);
  }
};

const handleConfirm = () => {
  emit('update:modelValue', internalValue.value);
  emit('confirm', internalValue.value);
  emit('update:visible', false);
};

const handleClear = () => {
  internalValue.value = [];
};

</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-multi-select-sheet';
</style> 